<!-- @module biz-travel -->
<!-- @author: YunTao.Li -->
<!-- @description: 考勤申诉 -->
<!-- @since: 2019-11-06 23:43:56 -->
<template>
  <el-card  class="box-card el-card-flex" >
    <div slot="header" class="clearfix">
        <span>
        <i class="el-icon-position"></i>
         查询信息
      </span>
    </div>
    <!-- form begin -->
    <div style="margin: 10px" >
    <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" size="mini">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="组织" prop="orgCode">
              <OrgSelectTree v-model="queryForm.orgCode" placeholder="组织" style="width: 240px" />
              <!-- @bindLabel="bindLabel"  -->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="月份" prop="yrmonth">
              <el-date-picker v-model="queryForm.yrmonth" style="width: 240px" type="month" placeholder="选择月" value-format="yyyy-MM" />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="员工" prop="empCode">
              <EmpCombobox v-model="queryForm.empCode" placeholder="员工" />
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="申诉编码" prop="explainCode">
              <el-input v-model="queryForm.explainCode" placeholder="申诉编码" style="width: 240px" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btnStyle">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList()"
          >查询</el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            @click="resetForm('queryForm')"
          >重置</el-button>
        </div>
    </el-form>
    </div>
    <!-- form end -->
      <div class="div-button">
        <el-button
          icon="el-icon-menu"
          type="primary"
          :disabled.sync="btn_view_disabled"
          size="mini"
          @click="onView"
        >查看详情</el-button>
        <el-button
          icon="el-icon-menu"
          type="success"
          :disabled.sync="btn_add_disabled"
          size="mini"
          @click="onAdd"
        >新增</el-button>
        <el-button
          icon="el-icon-menu"
          type="warning"
          size="mini"
          :disabled.sync="btn_edit_disabled"
          @click="onEdit"
        >编辑</el-button>
        <el-button
          icon="el-icon-menu"
          type="danger"
          size="mini"
          :disabled.sync="btn_delete_disabled"
          @click="handleDelete"
        >删除</el-button>
        <el-button
          icon="el-icon-menu"
          type="primary"
          size="mini"
          :disabled.sync="btn_submit_disabled"
          @click="handleSubmit"
        >提交</el-button>
        <el-button
          icon="el-icon-menu"
          type="info"
          size="mini"
          :disabled.sync="btn_drawback_disabled"
          @click="handleDrawback"
        >撤回</el-button>
        <el-button
          icon="el-icon-menu"
          type="primary"
          size="mini"
          :disabled.sync="btn_monitor_disabled"
          @click="onTaskMonitor"
        >监控</el-button>
      </div>
      <!-- table begin-->
      <div class="el-flex el-box-column" style="margin: 10px;">
        <el-card class="box-card el-card-flex" >
        <div slot="header" class="clearfix">
          <span>
          <i class="el-icon-position"></i>
            考勤申诉
          </span>
        </div>

        <div class="el-flex el-box-column" style="margin: 5px;" >
          <el-table v-loading="listLoading" :data="appealListData"
                    class="tableStyle" height="100%" border fit
                    highlight-current-row style="width: 100%"
                    @selection-change="onSelectChange">

            <el-table-column type="selection" width="55" />
            <el-table-column align="center" type="index" min-width="60px" label="序号" />
            <!--申请单编码-->
            <el-table-column align="center" label="申请单编码" min-width="230px">
              <template slot-scope="scope">
                <span>{{ scope.row.explainCode }}</span>
              </template>
            </el-table-column>
            <!--月份-->
            <el-table-column align="center" label="月份" min-width="120px">
              <template slot-scope="scope">
                <span>{{ scope.row.periodCode }}</span>
              </template>
            </el-table-column>
            <!--员工编码-->
            <el-table-column  align="center" label="员工编码" min-width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.empCode }}</span>
              </template>
            </el-table-column>
            <!--员工姓名-->
            <el-table-column align="center" label="员工姓名" min-width="200px">
              <template slot-scope="scope">
                <span>{{ scope.row.empName }}</span>
              </template>
            </el-table-column>
            <!--审批状态-->
            <el-table-column prop="businessStatus" :formatter="dictFormatter" label-class-name="businessStatus" min-width="100px" label="审批状态" align="center">
              <!-- <template slot-scope="scope">
                <span>{{ scope.row.businessStatus }}</span>
              </template> -->
            </el-table-column>
            <!--申请日期-->
            <el-table-column align="center" label="申请日期"  min-width="200px">
              <template slot-scope="scope">
                <span>{{ scope.row.creationDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
          <pagination  background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                      :page.sync="queryForm.page" :limit.sync="queryForm.limit"
                      @pagination="getList" />

        </el-card>

      <!-- table end -->
      <appealForm ref="appealInputDialog" @submitFunc="onSubmitForm" />
      <appealView ref="appealViewDialog" />
      <historyMonitorList ref="hisMonitorDialog" />
      </div>
  </el-card>
</template>

<script>
import { appealList, appealAdd, appealUpdate, appealDelete, appealSubmit, appealDrawback } from '@/api/attendance/appeal-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import appealForm from './components/form/appeal-form'
import appealView from './components/form/appeal-detail'
import OrgSelectTree from './components/combo/org-tree-select.vue'
// import EmpCombobox from './components/combo/emp-comb'
import historyMonitorList from '@/views/attendance/components/taskMonitorList'

export default {
  components: { Pagination, appealForm, appealView, OrgSelectTree, historyMonitorList },
  data() {
    return {
      msg: '-',
      text_form: '查询信息',
      text_grid: '考勤申诉',
      btn_view_disabled: true,
      btn_add_disabled: false,
      btn_delete_disabled: true,
      btn_edit_disabled: true,
      btn_submit_disabled: true,
      btn_drawback_disabled: true,
      btn_monitor_disabled: true,
      appealListData: [],
      listLoading: true,
      total: 0,
      selectedLength: 0,
      lastSelectedData: null,
      queryForm: {
        page: 1,
        limit: 20,
        ouId: '',
        orgCode: '',
        empCode: '',
        yrmonth: '',
        businessStatus: '',
        explainCode: ''
      }, inputRules: {
      },
      height: 'calc(100% - 16px)'
    }
  },
  created() {
    // 初始化查询展示
    this.getList()
    // 初始化按钮diabled状态
    this.onSelectChange({})
  },
  mounted() {
    this.queryForm.orgCode = localStorage.getItem('orgCode')
    this.queryForm.empCode = localStorage.getItem('empCode')
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.listLoading = true
      appealList(this.queryForm).then(response => {
        this.appealListData = response.data.records
        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    inputFormToggle(data) {
      this.$refs.appealInputDialog.toggele(data)
    },
    detailFormToggle(data) {
      this.$refs.appealViewDialog.toggele(data)
    },
    handleAdd(data) { // 添加方法
      appealAdd(data)
        .then(response => {
          if (response.code === 200) {
            this.getList()
            // 清理子组件
            this.$refs.appealInputDialog.resetFormData()
          } else {
            this.$message.error(response.message)
          }
        })
    },
    handleEdit(data) { // 编辑方法
      appealUpdate(data.explainId, data)
        .then(response => {
          if (response.code === 200) {
            this.getList()
            // 清理子组件
            this.$refs.appealInputDialog.resetFormData()
          } else {
            this.$message.error(response.message)
          }
        })
    },
    handleDelete() { // 删除方法
      this.$confirm('确定要删除么?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        appealDelete(this.lastSelectedData.explainId).then(response => {
          if (response.code === 200) {
            this.$message({ type: 'success', message: '删除成功!' })
            this.getList()
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(err => { console.error(err) })
    },
    handleSubmit() { // 提交请假单
      this.$confirm('确定要提交么?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        appealSubmit(this.lastSelectedData.explainId, this.lastSelectedData).then(response => {
          if (response.code === 200) {
            this.$message({ type: 'success', message: '提交成功!' })
            this.getList()
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(err => { console.error(err) })
    },
    handleDrawback() {
      this.$confirm('确定要撤回么?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        appealDrawback(this.lastSelectedData.explainId, this.lastSelectedData).then(response => {
          if (response.code === 200) {
            this.$message({ type: 'success', message: '撤回成功!' })
            this.getList()
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(err => { console.error(err) })
    },
    onTaskMonitor() {
      const selectedData = JSON.parse(JSON.stringify(this.lastSelectedData))
      this.$refs.hisMonitorDialog.toggele(selectedData)
    },
    onAdd() {
      this.inputFormToggle(null)
    },
    onEdit() {
      const selectedData = JSON.parse(JSON.stringify(this.lastSelectedData))
      this.inputFormToggle(selectedData)
    },
    onView() {
      const selectedData = JSON.parse(JSON.stringify(this.lastSelectedData))
      this.detailFormToggle(selectedData)
    },
    onSubmitForm(data) { // 表单提交事件
      const submitExplainId = data.explainId
      if (submitExplainId === null || submitExplainId === '' || JSON.stringify(submitExplainId) === '{}' || typeof submitExplainId === 'undefined') {
        this.handleAdd(data)
      } else {
        this.handleEdit(data)
      }
    },
    onSelectChange(selection) {
      this.selectedLength = selection.length || 0
      this.lastSelectedData = selection[this.selectedLength - 1]

      this.btn_delete_disabled = true
      this.btn_edit_disabled = true
      this.btn_submit_disabled = true
      this.btn_drawback_disabled = true
      this.btn_monitor_disabled = true
      this.btn_view_disabled = true

      if (!this.lastSelectedData) {
        return
      }

      const businessStatus = this.lastSelectedData.businessStatus
      if (this.selectedLength && this.selectedLength === 1) {
        this.btn_view_disabled = false

        if (businessStatus && businessStatus === 'A') { // 待提交，草稿
          this.btn_edit_disabled = false
          this.btn_delete_disabled = false
          this.btn_submit_disabled = false
        } else if (businessStatus && businessStatus === 'B') { // 已撤回
          this.btn_edit_disabled = false
          this.btn_submit_disabled = false
          this.btn_monitor_disabled = false
        } else if (businessStatus && businessStatus === 'D') {
          // 已驳回
          this.btn_edit_disabled = false
          this.btn_submit_disabled = false
          this.btn_monitor_disabled = false
        } else if (businessStatus && businessStatus === 'C') { // 已提交，待审批
          this.btn_drawback_disabled = false
          this.btn_monitor_disabled = false
        } else if (businessStatus && businessStatus === 'E') { // 已提交，已审批
          this.btn_monitor_disabled = false
        } else if (businessStatus && businessStatus === 'F') { // 已提交，审批中
          this.btn_monitor_disabled = false
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
